/**
 * 解决事件处理函数this指向问题的四种方案：
 *  1. 【推荐】 在构造函数中统一处理 this 指向的绑定
 *  2. 【最推荐】创建事件处理函数时，使用 Public class fields + 箭头函数 语法
 *  3. 传递事件处理函数时，使用 箭头函数
 *     箭头函数才是事件处理函数，原本的函数变成了一个普通函数在调用
 *  4. 传递事件处理函数时，使用 bind 绑定 this
 */

import React from "react";

interface AppProps {}
interface AppState {
  count: number;
}

class App extends React.Component<AppProps, AppState> {
  state: Readonly<AppState> = {
    count: 1,
  };

  constructor(props: AppProps) {
    super(props);
    // 1. 【推荐】 在构造函数中统一处理 this 指向的绑定
    //    内部操作：将原型上的 handleClick1 绑定好 this 之后，返回的新函数赋值给实例对象本身上的 handleClick1
    this.handleClick1 = this.handleClick1.bind(this);
  }

  handleClick1() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

  handleClick2 = () => {
    this.setState((state) => ({ count: state.count + 1 }));
  };

  handleClick3() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

  handleClick4() {
    this.setState((state) => ({ count: state.count + 1 }));
  }

  handleClick5() {
    console.log("handleClick5");
    return () => {
      console.log("111");
      this.setState((state) => ({ count: state.count + 1 }));
    };
  }

  render() {
    console.log(this);
    return (
      <div>
        <h1>App</h1>
        <button onClick={this.handleClick5()}>点我, {this.state.count}</button>
      </div>
    );
  }
}

export default App;
